<template>
  <a-card :bordered="false">
    <div>
      <a-form-model layout="inline">
        <a-row :gutter="[20, 50]">
          <a-col :md="6" :sm="24">
            <a-form-model-item :label="$t('all.autotext1273')">
              <a-select
                v-model="queryParam.sponsorId"
                show-search
                :filter-option="filterOption"
                allowClear
                @change="handleChange(1)"
              >
                <a-select-option v-for="list in phaseList" :key="list.sponsorId">
                  {{ list.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item :label="$t('all.autotext992')">
              <a-select
                v-model="queryParam.proNo"
                show-search
                :filter-option="filterOption"
                allowClear
                @change="handleChange"
              >
                <a-select-option v-for="item in proNoList" :key="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24" align="right">
            <a-space>
              <a-button type="primary" @click="handleExport">{{ $t('all.autotext1744') }}</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div style="padding: 5px;"></div>
    <div class="total">
      <div>{{ $t('all.autotext1762') }}{{ list.length }}{{ $t('all.autotext1763') }}</div>
    </div>
    <a-row :gutter="[20, 20]">
      <a-col
        :lg="8"
        :md="12"
        :sm="24"
        v-for="(item, i) in list"
        :key="i"
      >
        <a-card class="mian-wrap" @click="handleDetail(item)">
          <div class="header">
            <h3 class="title" :title="item.name">
              <img v-if="item.classify === 2" src="@assets/images/overview/test-item-icon.svg">
              {{ item.name }}
            </h3>
            <a-tag :color="$options.filters.enumValueByKey(item.status, $const.PROJECT_STATUS, 'color')">
              {{ item.status| enumValueByKey($const.PROJECT_STATUS) }}
            </a-tag>
          </div>
          <div class="main">
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext992') }}</div>
              <div class="item-value" :title="item.no">{{ item.no }}</div>
            </div>
          </div>
          <a-divider />
          <div class="main">
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext151') }}({{ $t('all.autotext811') }})</div>
              <div class="item-value">{{ item.totalBudget.toFixed(2) }}</div>
            </div>
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext1746') }}({{ $t('all.autotext811') }})</div>
              <div class="item-value">{{ item.usedAmount.toFixed(2) }}</div>
            </div>
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext1747') }}({{ $t('all.autotext811') }})</div>
              <div class="item-value">{{ item.canUseAmount.toFixed(2) }}</div>
            </div>
          </div>
          <a-divider />
          <div class="main">
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext1253') }}</div>
              <div class="item-value">{{ item.pmName || '-' }}</div>
            </div>
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext1273') }}</div>
              <div class="item-value" :title="item.sponsorName">{{ item.sponsorName || '-' }}</div>
            </div>
            <!--            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext46') }}</div>
              <div class="item-value" :title="item.contractCode">{{ item.contractCode || '-' }}</div>
            </div>-->
            <div class="main-item">
              <div class="item-label">{{ $t('all.autotext666') }}</div>
              <div class="item-value">{{ item.createTimeStr }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <exportModal ref="exportRef" />
  </a-card>
</template>

<script>
import { listV2, listProNo, listSponsor } from '@api/entry/entry'
import exportModal from '@views/entry/components/exportModal'

export default {
  components: { exportModal },
  data () {
    return {
      phaseList: [],
      proNoList: [],
      queryParam: {},
      list: []
    }
  },
  mounted () {
    this.getSponsorList()
    this.getList()
    this.getListProNo()
  },
  methods: {
    // 请求申办方列表
    async getSponsorList () {
      const res = await listSponsor()
      this.phaseList = res
    },
    // 请求临床试验方案编号
    async getListProNo () {
      const res = await listProNo()
      this.proNoList = res
    },
    // 请求项目列表
    async getList () {
      const res = await listV2(this.queryParam)
      if (!res) {
        this.list = []
        return
      }
      this.list = res
    },
    handleChange (e) {
      this.getList()
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 导出合同费用统计表
    async handleExport () {
      this.$refs.exportRef.open(1)
    },
    // 跳转项目详情看板
    handleDetail (item) {
      this.$store.dispatch('EnterProject', item).then(res => {
        this.$router.push({ name: 'high' })
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-control-wrapper {
    flex: 1;
  }
}
.mian-wrap {
  cursor: pointer;
  height: 326px;
  overflow-y: auto;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10;
  margin-bottom: 20px;
  .title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.main {
  .main-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0;
    .item-label {
      width: 100px;
      color: #999;
      white-space: nowrap;
    }
    .item-value {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
    }
  }
}
.total {
  padding: 20px 0;
}
.ant-divider-horizontal {
  margin: 12px 0 !important;
}
</style>
